define(function(require,exports,module){
   'use strict';

    var React = require('react');
    var Highcharts = require('highcharts');

    module.exports = React.createClass({
        getInitialState:function(){
            var category = [];
            var serias = [];
			if(this.props.data.length > 0){
	            this.props.data.map(function(item){
	                category.push(item.name);
	                serias.push(item.value);
	            });
			}

            return {
                category:category,
                serias:serias
            };
        },
        componentDidMount:function(){
            new Highcharts.Chart({
				colors: [
					'#058DC7',
					'#50B432',
					'#ED561B',
					'#DDDF00',
					'#24CBE5',
					'#64E572',
					'#FF9655',
					'#FFF263', 
					'#6AF9C4'
				], 
                chart: {
                    renderTo: this.props.id,
                    type: 'areaspline'
                },
                title: {
                    text: this.props.title
                },
                subtitle: {
                    text: this.props.description
                },
                xAxis: {
                    categories: this.state.category
                },
                yAxis: {
                    title: {
                        text: this.props.y
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000 + 'k';
                        }
                    }
                },
                tooltip: {
					formatter:function(){
						return '【'+this.x+'】'+ this.series.name + ':' + Highcharts.numberFormat(this.y,'0','.',',');
					},
					crosshairs: true,
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: [{
                    name: this.props.title,
                    data: this.state.serias
                }]
            });
        },
        render:function(){
            return (
                <div className={this.props.className} id={this.props.id}></div>
            );
        }
    });
});